
import { createRouter ,createWebHistory } from 'vue-router' ;

import Status from '@/components/Status.vue' ;
import Header from '@/components/Header.vue' ;
import Footer from '@/components/Footer.vue' ;
import TopicList from '@/components/TopicList.vue' ;

const routes = [
    {
        path: '/' ,
        name: 'root' ,
        redirect: '/home',
        component: () => import('@/components/Home.vue'),
        children:[
            {
                path: 'home',
                name: 'home' ,
                components: {
                    'status': Status,
                    'header': Header ,
                    'topic-list': TopicList,
                    'footer': Footer
                },
                meta: {
                    title: '首页'
                }
            }
        ]
    },
    {
        path: '/login',
        name: 'login' ,
        component: () => import('@/components/Login.vue'),
        meta: {
            title: '用户登录'
        }
    },
    {
        path: '/register',
        name: 'register' ,
        component: () => import('@/components/Register.vue'),
        meta: {
            title: '用户注册'
        }
    },
    {
        path: '/logout',
        name: 'logout' ,
        component: () => import('@/components/Logout.vue'),
        meta: {
            title: '退出登录'
        }
    }
];

const options = {
    routes,
    history: createWebHistory()
}

const router = createRouter( options );

// 导航守卫: 全局后置钩子
// 导航被确认 后才调用全局的 afterEach 钩子
router.afterEach( to => {
    document.title = to.meta.title ;
});

// 导出 router 对象
export default router ;